<template>
  <div class="commodity-container">
    <!-- 模板内容保持不变 -->
    <!-- 顶部导航栏 -->
    <header class="top-nav">
      <div class="logo">菜品管理系统</div>
      <button class="logout-btn" @click="handleLogout">
        <i class="fa fa-sign-out"></i> 退出登录
      </button>
    </header>

    <!-- 功能导航 -->
    <nav class="function-nav">
      <button 
        class="function-btn" 
        :class="{ active: activeTab === 'commodityList' }"
        @click="activeTab = 'commodityList'"
      >
        <i class="fa fa-list"></i> 菜品列表
      </button>
      <button 
        class="function-btn" 
        :class="{ active: activeTab === 'commodityStatistics' }"
        @click="activeTab = 'commodityStatistics'"
      >
        <i class="fa fa-bar-chart"></i> 销售统计
      </button>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 操作栏 -->
      <div class="action-bar">
        <button class="back-btn" @click="goBack">
          <i class="fa fa-arrow-left"></i> 返回店铺管理
        </button>
        
        <div class="action-bar-right">
          <h2 class="section-title">
            {{ currentStoreName || '菜品管理' }}
          </h2>
          <button class="add-btn" @click="handleAddCommodity">
            <i class="fa fa-plus"></i> 添加菜品
          </button>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading">
        <i class="fa fa-circle-o-notch fa-spin"></i> 加载中...
      </div>

      <!-- 错误提示 -->
      <div v-if="errorMessage" class="error-message">
        <i class="fa fa-exclamation-circle"></i> {{ errorMessage }}
        <button class="close-btn" @click="errorMessage = ''">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <!-- 成功提示 -->
      <div v-if="successMessage" class="success-message">
        <i class="fa fa-check-circle"></i> {{ successMessage }}
        <button class="close-btn" @click="successMessage = ''">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <!-- 菜品列表 -->
      <div v-if="activeTab === 'commodityList' && !isLoading && !errorMessage">
        <div v-if="commodities.length === 0" class="empty-state">
          <i class="fa fa-cutlery"></i>
          <p>暂无菜品数据</p>
          <button class="create-first-btn" @click="handleAddCommodity">
            添加您的第一道菜品
          </button>
        </div>

        <div class="commodity-table">
          <table>
            <thead>
              <tr>
                <th>菜品图片</th>
                <th>菜品名称</th>
                <th>价格</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="commodity in commodities" :key="commodity.id">
                <td>
                  <div class="commodity-img-container">
                    <img 
                      :src="commodity.image ? `/file${commodity.image}` : defaultCommodityImage" 
                      alt="菜品图片" 
                      class="commodity-img"
                    >
                  </div>
                </td>
                <td>{{ commodity.name }}</td>
                <td>¥{{ commodity.price }}</td>
                <td>
                  <span 
                    :class="commodity.status === 1 ? 'status-active' : 'status-inactive'"
                  >
                    {{ commodity.status_display }}
                  </span>
                </td>
                <td class="action-buttons">
                  <button 
                    class="edit-btn" 
                    @click="handleEditCommodity(commodity)"
                  >
                    <i class="fa fa-edit"></i> 编辑
                  </button>
                  <button 
                    class="status-btn"
                    :class="commodity.status === 1 ? 'status-inactive-btn' : 'status-active-btn'"
                    @click="handleStatusChange(commodity.id, commodity.status)"
                  >
                    {{ commodity.status === 1 ? '下架' : '上架' }}
                  </button>
                  <button 
                    class="delete-btn" 
                    @click="handleDeleteCommodity(commodity.id, commodity.name)"
                  >
                    <i class="fa fa-trash"></i> 删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 销售统计（占位） -->
      <div v-if="activeTab === 'commodityStatistics' && !isLoading && !errorMessage" class="placeholder-section">
        <h2 class="section-title">销售统计</h2>
        <div class="placeholder-content">
          <i class="fa fa-bar-chart"></i>
          <p>销售统计功能正在开发中...</p>
        </div>
      </div>
    </main>

    <!-- 添加/编辑菜品弹窗 -->
    <div v-if="showCommodityModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h3>{{ isEditing ? '编辑菜品' : '添加菜品' }}</h3>
          <button class="close-modal" @click="closeCommodityModal">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <form @submit.prevent="isEditing ? updateCommodity() : createCommodity()" class="modal-form">
          <div class="form-group">
            <label for="commodityName">菜品名称 <span class="required">*</span></label>
            <input
              type="text"
              id="commodityName"
              v-model="currentCommodity.name"
              required
              placeholder="请输入菜品名称"
              class="form-input"
            >
          </div>

          <div class="form-group">
            <label for="commodityPrice">菜品价格 <span class="required">*</span></label>
            <input
              type="number"
              id="commodityPrice"
              v-model="currentCommodity.price"
              required
              placeholder="请输入菜品价格"
              class="form-input"
              step="0.01"
              min="0"
            >
          </div>

          <div class="form-group">
            <label for="commodityImage">菜品图片</label>
            <input
              type="file"
              id="commodityImage"
              accept="image/jpeg, image/png"
              @change="handleImageUpload"
              class="file-input"
            >
            <div v-if="previewImage" class="image-preview">
              <img :src="previewImage" alt="预览图" class="preview-img">
            </div>
          </div>

          <div class="form-group">
            <label for="commodityStatus">状态</label>
            <select 
              id="commodityStatus" 
              v-model="currentCommodity.status" 
              class="form-select"
            >
              <option value="1">待售</option>
              <option value="2">下架</option>
            </select>
          </div>

          <div class="modal-footer">
            <button type="button" class="cancel-btn" @click="closeCommodityModal">
              取消
            </button>
            <button 
              type="submit" 
              class="submit-btn"
              :disabled="isSubmitting"
            >
              <span v-if="isSubmitting">{{ isEditing ? '更新中...' : '添加中...' }}</span>
              <span v-else>{{ isEditing ? '更新菜品' : '添加菜品' }}</span>
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 确认操作弹窗 -->
    <div v-if="showConfirmModal" class="modal-overlay">
      <div class="modal confirm-modal">
        <div class="modal-header">
          <h3>{{ confirmType === 'delete' ? '确认删除' : '确认修改状态' }}</h3>
          <button class="close-modal" @click="showConfirmModal = false">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <p v-if="confirmType === 'delete'">
            您确定要删除菜品 <strong>{{ confirmTargetName }}</strong> 吗？此操作不可撤销。
          </p>
          <p v-if="confirmType === 'status'">
            您确定要将菜品状态修改为 <strong>{{ statusChangeTarget }}</strong> 吗？
          </p>
        </div>

        <div class="modal-footer">
          <button type="button" class="cancel-btn" @click="showConfirmModal = false">
            取消
          </button>
          <button 
            type="button" 
            class="submit-btn danger-btn"
            @click="confirmAction"
            :disabled="isProcessing"
          >
            <span v-if="isProcessing">处理中...</span>
            <span v-else>{{ confirmType === 'delete' ? '确认删除' : '确认' }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs,  watch } from 'vue';
import { cloneDeep } from 'lodash';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

// 路由实例
const router = useRouter();
const route = useRoute();

// 状态管理
const state = reactive({
  // 加载状态
  isLoading: true,
  isSubmitting: false,
  isProcessing: false,
  errorMessage: '',
  successMessage: '',
  
  // 活跃标签
  activeTab: 'commodityList',
  
  // 店铺和菜品数据
  storeId: null,
  currentStoreName: '',
  commodities: [],
  currentCommodity: {
    id: null,
    name: '',
    price: '',
    image: null,
    status: 1 // 1: 待售, 2: 下架
  },
  
  // 弹窗状态
  showCommodityModal: false,
  showConfirmModal: false,
  isEditing: false,
  confirmType: '', // 'delete' 或 'status'
  confirmTargetId: null,
  confirmTargetName: '',
  
  // 状态修改相关
  statusChangeTarget: '',
  
  // 图片相关
  previewImage: '',
  defaultCommodityImage: 'https://picsum.photos/id/431/100/100'
});

const { 
  isLoading, isSubmitting, isProcessing, errorMessage, successMessage,
  activeTab, storeId, currentStoreName, commodities, currentCommodity,
  showCommodityModal, showConfirmModal, isEditing, confirmType, 
  confirmTargetId, confirmTargetName, statusChangeTarget,
  previewImage, defaultCommodityImage
} = toRefs(state);

// 1. 先定义fetchCommodities函数（关键修复：确保在watch之前定义）
const fetchCommodities = async () => {
  if (!storeId.value) return;
  
  try {
    isLoading.value = true;
    const response = await axios.get(`/user/store/${storeId.value}/commodity/`);
    commodities.value = response.data;
    
    // 如果有菜品，获取店铺名称
    if (commodities.value.length > 0) {
      currentStoreName.value = commodities.value[0].store_name;
    }
  } catch (err) {
    errorMessage.value = err.response?.data?.message || '获取菜品列表失败';
    console.error('获取菜品列表失败:', err);
  } finally {
    isLoading.value = false;
  }
};

// 2. 再定义watch监听（现在可以安全访问fetchCommodities）
watch(
  () => route.params.storeId,
  (newStoreId) => {
    if (newStoreId) {
      storeId.value = newStoreId;
      fetchCommodities(); // 现在函数已经定义，可以安全调用
    } else {
      // 如果没有店铺ID，返回店铺管理页面
      goBack();
    }
  },
  { immediate: true }
);

// 返回店铺管理页面
const goBack = () => {
  router.push('/storemanage');
};

// 处理图片上传预览
const handleImageUpload = (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  // 验证文件类型
  if (!['image/jpeg', 'image/png'].includes(file.type)) {
    errorMessage.value = '请上传JPG或PNG格式的图片';
    return;
  }
  
  currentCommodity.value.image = file;
  
  // 显示预览
  const reader = new FileReader();
  reader.onload = (e) => {
    previewImage.value = e.target.result;
  };
  reader.readAsDataURL(file);
};

// 添加菜品
const createCommodity = async () => {
  if (!storeId.value) return;
  
  try {
    isSubmitting.value = true;
    errorMessage.value = '';
    
    const formData = new FormData();
    formData.append('name', currentCommodity.value.name);
    formData.append('price', currentCommodity.value.price);
    formData.append('status', currentCommodity.value.status);
    formData.append('store', storeId.value);
    
    if (currentCommodity.value.image) {
      formData.append('image', currentCommodity.value.image);
    }
    
    const response = await axios.post(`/user/store/${storeId.value}/commodity/`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    
    // 添加成功，刷新列表并关闭弹窗
    commodities.value.push(response.data);
    closeCommodityModal();
    
    successMessage.value = '菜品添加成功';
    setTimeout(() => successMessage.value = '', 3000);
  } catch (err) {
    errorMessage.value = err.response?.data?.message || '添加菜品失败';
    console.error('添加菜品失败:', err);
  } finally {
    isSubmitting.value = false;
  }
};

// 更新菜品
const updateCommodity = async () => {
  if (!storeId.value || !currentCommodity.value.id) return;
  
  try {
    isSubmitting.value = true;
    errorMessage.value = '';
    
    const formData = new FormData();
    formData.append('name', currentCommodity.value.name);
    formData.append('price', currentCommodity.value.price);
    formData.append('status', currentCommodity.value.status);
    formData.append('store', storeId.value);
    
    if (currentCommodity.value.image) {
      formData.append('image', currentCommodity.value.image);
    }
    
    const response = await axios.put(
      `/user/store/${storeId.value}/commodity/${currentCommodity.value.id}/`, 
      formData, 
      {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    );
    
    // 更新成功，刷新列表
    const index = commodities.value.findIndex(item => item.id === currentCommodity.value.id);
    if (index !== -1) {
      commodities.value[index] = response.data;
    }
    
    closeCommodityModal();
    
    successMessage.value = '菜品更新成功';
    setTimeout(() => successMessage.value = '', 3000);
  } catch (err) {
    errorMessage.value = err.response?.data?.message || '更新菜品失败';
    console.error('更新菜品失败:', err);
  } finally {
    isSubmitting.value = false;
  }
};

// 处理编辑菜品
const handleEditCommodity = (commodity) => {
  // 深拷贝菜品数据
  currentCommodity.value = cloneDeep(commodity);
  isEditing.value = true;
  showCommodityModal.value = true;
  
  // 如果有图片，设置预览
  if (commodity.image) {
    previewImage.value = `/file${commodity.image}`;
  } else {
    previewImage.value = '';
  }
};

// 处理添加菜品
const handleAddCommodity = () => {
  // 重置表单
  currentCommodity.value = {
    id: null,
    name: '',
    price: '',
    image: null,
    status: 1
  };
  previewImage.value = '';
  isEditing.value = false;
  showCommodityModal.value = true;
};

// 关闭菜品弹窗
const closeCommodityModal = () => {
  showCommodityModal.value = false;
  isEditing.value = false;
  previewImage.value = '';
};

// 处理状态修改
const handleStatusChange = (commodityId, status) => {
  confirmType.value = 'status';
  confirmTargetId.value = commodityId;
  
  // 设置目标状态文本
  statusChangeTarget.value = status === 1 ? '下架' : '待售';
  
  // 显示确认弹窗
  showConfirmModal.value = true;
};

// 处理删除菜品
const handleDeleteCommodity = (commodityId, commodityName) => {
  confirmType.value = 'delete';
  confirmTargetId.value = commodityId;
  confirmTargetName.value = commodityName;
  
  // 显示确认弹窗
  showConfirmModal.value = true;
};

// 确认操作
const confirmAction = async () => {
  if (!storeId.value || !confirmTargetId.value) return;
  
  try {
    isProcessing.value = true;
    errorMessage.value = '';
    
    if (confirmType.value === 'status') {
      // 计算目标状态 (1 <-> 2)
      const currentCommodity = commodities.value.find(item => item.id === confirmTargetId.value);
      const targetStatus = currentCommodity?.status === 1 ? 2 : 1;
      
      // 发送修改状态请求
      await axios.put(
        `/user/store/${storeId.value}/commodity/${confirmTargetId.value}/change/`, 
        { status: targetStatus }
      );
      
      // 更新本地数据
      const index = commodities.value.findIndex(item => item.id === confirmTargetId.value);
      if (index !== -1) {
        commodities.value[index].status = targetStatus;
        commodities.value[index].status_display = targetStatus === 1 ? '待售' : '下架';
      }
      
      successMessage.value = '菜品状态修改成功';
    } else if (confirmType.value === 'delete') {
      // 发送删除请求
      await axios.delete(`/user/store/${storeId.value}/commodity/${confirmTargetId.value}/`);
      
      // 更新本地数据
      commodities.value = commodities.value.filter(
        item => item.id !== confirmTargetId.value
      );
      
      successMessage.value = '菜品删除成功';
    }
    
    // 关闭弹窗
    showConfirmModal.value = false;
    setTimeout(() => successMessage.value = '', 3000);
  } catch (err) {
    errorMessage.value = err.response?.data?.message || 
      (confirmType.value === 'delete' ? '删除菜品失败' : '修改菜品状态失败');
    console.error(`${confirmType.value === 'delete' ? '删除' : '修改'}菜品失败:`, err);
  } finally {
    isProcessing.value = false;
  }
};

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token');
  router.push('/login');
};

// 页面加载时获取数据（如果需要）
onMounted(() => {
  // 如果路由参数已存在，确保数据加载
  if (route.params.storeId) {
    storeId.value = route.params.storeId;
    fetchCommodities();
  }
});
</script>

<style scoped>
/* 样式保持不变 */
.commodity-container {
  min-height: 100vh;
  background-color: #fff;
  color: #333;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #ff7a5a;
  color: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.logout-btn {
  background-color: white;
  color: #333;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: #f8f9fa;
  transform: translateY(-2px);
}

/* 功能导航 */
.function-nav {
  display: flex;
  background-color: #fff5f5;
  border-bottom: 1px solid #ffe0e0;
}

.function-btn {
  padding: 15px 30px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
}

.function-btn:hover {
  background-color: #ffe8e8;
}

.function-btn.active {
  background-color: #ffd166;
  color: #333;
  font-weight: bold;
  border-bottom: 3px solid #ff7a5a;
}

/* 主内容区 */
.main-content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
}

/* 操作栏 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.action-bar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-btn {
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  font-size: 14px;
}

.back-btn:hover {
  background-color: #e9ecef;
}

.section-title {
  color: #ff7a5a;
  font-size: 22px;
  margin: 0;
}

.add-btn {
  background-color: #ff7a5a;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}

.add-btn:hover {
  background-color: #e66a4c;
  transform: translateY(-2px);
}

/* 菜品表格 */
.commodity-table {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(255,122,90,0.1);
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f5f5f5;
}

th {
  background-color: #fff5f5;
  color: #555;
  font-weight: 600;
}

tr:hover {
  background-color: #fafafa;
}

.commodity-img-container {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
}

.commodity-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-active {
  color: #28a745;
  background-color: #f0fff4;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.status-inactive {
  color: #dc3545;
  background-color: #fff5f5;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.edit-btn {
  background-color: #ffd166;
  color: #333;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
  font-size: 13px;
}

.edit-btn:hover {
  background-color: #ffc433;
}

.status-btn {
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
  font-size: 13px;
  color: white;
}

.status-active-btn {
  background-color: #28a745;
}

.status-active-btn:hover {
  background-color: #218838;
}

.status-inactive-btn {
  background-color: #dc3545;
}

.status-inactive-btn:hover {
  background-color: #c82333;
}

.delete-btn {
  background-color: #e53e3e;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
  font-size: 13px;
}

.delete-btn:hover {
  background-color: #c53030;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background-color: #fff5f5;
  border-radius: 8px;
  color: #888;
}

.empty-state i {
  font-size: 50px;
  margin-bottom: 20px;
  color: #ffb3b3;
}

.create-first-btn {
  margin-top: 20px;
  background-color: #ff7a5a;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.create-first-btn:hover {
  background-color: #e66a4c;
}

/* 占位区域 */
.placeholder-section {
  padding: 50px 20px;
}

.placeholder-content {
  text-align: center;
  padding: 80px 20px;
  background-color: #fff5f5;
  border-radius: 8px;
  color: #888;
}

.placeholder-content i {
  font-size: 60px;
  margin-bottom: 20px;
  color: #ffb3b3;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.confirm-modal {
  max-width: 400px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-modal {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
}

.modal-form {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 500;
}

.required {
  color: #dc3545;
}

.form-input, .form-select {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: #ff7a5a;
}

.file-input {
  padding: 5px;
}

.image-preview {
  margin-top: 10px;
}

.preview-img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 4px;
  border: 1px solid #eee;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid #eee;
}

.cancel-btn {
  padding: 8px 15px;
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn:hover {
  background-color: #e9ecef;
}

.submit-btn {
  padding: 8px 15px;
  background-color: #ff7a5a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover {
  background-color: #e66a4c;
}

.submit-btn.danger-btn {
  background-color: #e53e3e;
}

.submit-btn.danger-btn:hover {
  background-color: #c53030;
}

.submit-btn:disabled {
  background-color: #ffb3b3;
  cursor: not-allowed;
}

/* 消息提示 */
.loading {
  text-align: center;
  padding: 50px;
  color: #ff7a5a;
  font-size: 18px;
}

.error-message {
  background-color: #ffebee;
  color: #b71c1c;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.error-message .close-btn {
  color: #b71c1c;
}

.success-message .close-btn {
  color: #2e7d32;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .function-nav {
    overflow-x: auto;
  }
  
  .function-btn {
    padding: 15px 20px;
    flex-shrink: 0;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-btn {
    width: 100%;
  }
}
</style>
    